<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- v-model指令是内部配合着input事件来操作的，.lazy修饰符，可以将input修改成change事件，失去焦点时更新数据 -->
        <input type="text" v-model.lazy='msg'>{{msg}}
        <hr>
        <!-- 因为输入框的value值默认是string类型，需要做相加运算处理，就需要进行数据转换，.number修饰符可以将输入框的数字字符串转换为数字型 -->
        <input type="text" v-model.number='number'>{{number+100}}
        <hr>
        <!-- 去除两端空格 .trim -->
        <input type="text" v-model.trim = 'str'>{{str.length}}
    </div>
</body>
<script src="./V/vue.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            msg:'',
            number:'',
            str:''
        }
    })
</script>
</html>